<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目详情 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
    <style>
        .question-container {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }
        
        .question-type {
            background-color: var(--primary-light);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .question-difficulty {
            display: flex;
        }
        
        .difficulty-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--border-color);
            margin-left: 2px;
        }
        
        .difficulty-dot.active {
            background-color: var(--warning-color);
        }
        
        .question-content {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .options-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
        }
        
        .option-item {
            display: flex;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            transition: all 0.2s;
        }
        
        .option-item.selected {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
        }
        
        .option-item.correct {
            border-color: var(--success-color);
            background-color: rgba(92, 196, 137, 0.1);
        }
        
        .option-item.wrong {
            border-color: var(--danger-color);
            background-color: rgba(255, 115, 115, 0.1);
        }
        
        .option-marker {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--spacing-md);
            font-size: 14px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        
        .option-item.selected .option-marker {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        .option-item.correct .option-marker {
            background-color: var(--success-color);
            border-color: var(--success-color);
            color: white;
        }
        
        .option-item.wrong .option-marker {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
            color: white;
        }
        
        .option-content {
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .question-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-lg);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            font-size: 14px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .action-btn i {
            margin-right: 4px;
        }
        
        .action-btn.favorite {
            color: var(--warning-color);
        }
        
        .submit-btn {
            background-color: var(--primary-color);
            color: white;
            padding: var(--spacing-sm) 0;
            border-radius: var(--radius-md);
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            width: 100%;
            margin-bottom: var(--spacing-md);
        }
        
        .answer-container {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            display: none;
        }
        
        .answer-container.active {
            display: block;
        }
        
        .answer-header {
            display: flex;
            align-items: center;
            margin-bottom: var(--spacing-md);
        }
        
        .answer-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: var(--success-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--spacing-sm);
            color: white;
            font-size: 14px;
        }
        
        .answer-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .correct-answer {
            font-size: 14px;
            color: var(--success-color);
            margin-bottom: var(--spacing-sm);
        }
        
        .answer-explanation {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .knowledge-points {
            background-color: var(--bg-light);
            padding: var(--spacing-md);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-md);
        }
        
        .knowledge-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
        }
        
        .knowledge-content {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        
        .related-questions {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: 60px;
        }
        
        .related-header {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .related-item {
            display: flex;
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .related-type {
            background-color: var(--primary-light);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: var(--spacing-sm);
            white-space: nowrap;
        }
        
        .related-content {
            font-size: 14px;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .nav-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            display: flex;
            padding: var(--spacing-sm);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .nav-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm) 0;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .nav-btn i {
            margin-right: 4px;
        }
        
        .nav-btn.primary {
            background-color: var(--primary-color);
            color: white;
            border-radius: var(--radius-md);
            margin: 0 var(--spacing-xs);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <a href="question-bank.html" class="back-btn">
                    <i class="icon-back"></i>
                </a>
                <h1>题目详情</h1>
                <div class="header-actions">
                    <a href="#" class="icon-more"></a>
                </div>
            </div>
        </header>

        <!-- 题目内容 -->
        <div class="question-container">
            <div class="question-header">
                <div class="question-type">单选题</div>
                <div class="question-difficulty">
                    <div class="difficulty-dot active"></div>
                    <div class="difficulty-dot"></div>
                    <div class="difficulty-dot"></div>
                </div>
            </div>
            <div class="question-content">
                老年人血压测量时，以下哪种做法是正确的？
            </div>
            <div class="options-list">
                <div class="option-item">
                    <div class="option-marker">A</div>
                    <div class="option-content">测量前让患者剧烈活动，提高血压值</div>
                </div>
                <div class="option-item correct">
                    <div class="option-marker">B</div>
                    <div class="option-content">测量前让患者休息5-10分钟</div>
                </div>
                <div class="option-item wrong selected">
                    <div class="option-marker">C</div>
                    <div class="option-content">测量时袖带松散缠绕</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">D</div>
                    <div class="option-content">测量时手臂高于心脏水平</div>
                </div>
            </div>
            <div class="question-actions">
                <div class="action-btn">
                    <i class="icon-report"></i>
                    <span>报错</span>
                </div>
                <div class="action-btn favorite">
                    <i class="icon-favorite"></i>
                    <span>已收藏</span>
                </div>
            </div>
            <div class="submit-btn" id="show-answer">查看答案解析</div>
        </div>

        <!-- 答案解析 -->
        <div class="answer-container" id="answer-container">
            <div class="answer-header">
                <div class="answer-icon">
                    <i class="icon-check"></i>
                </div>
                <div class="answer-title">答案与解析</div>
            </div>
            <div class="correct-answer">正确答案：B</div>
            <div class="answer-explanation">
                测量血压前，应让患者休息5-10分钟，保持安静状态，这样测得的血压值才能真实反映患者的血压水平。剧烈活动会导致血压暂时升高；袖带松散缠绕会导致测量不准确；手臂高于心脏水平会导致测量值偏低。
            </div>
            <div class="knowledge-points">
                <div class="knowledge-title">知识点</div>
                <div class="knowledge-content">
                    血压测量的正确方法：
                    1. 测量前休息5-10分钟
                    2. 袖带紧贴上臂，下缘距肘窝2-3cm
                    3. 手臂与心脏保持同一水平
                    4. 测量时保持安静，不说话
                </div>
            </div>
        </div>

        <!-- 相关题目 -->
        <div class="related-questions">
            <h3 class="related-header">相关题目</h3>
            <div class="related-list">
                <div class="related-item">
                    <div class="related-type">单选题</div>
                    <div class="related-content">测量血压时，袖带应缠绕在哪个部位？</div>
                </div>
                <div class="related-item">
                    <div class="related-type">判断题</div>
                    <div class="related-content">血压测量时，两次测量间隔应至少1分钟。</div>
                </div>
                <div class="related-item">
                    <div class="related-type">单选题</div>
                    <div class="related-content">老年人正常血压范围是多少？</div>
                </div>
                <div class="related-item">
                    <div class="related-type">多选题</div>
                    <div class="related-content">以下哪些因素会影响血压测量的准确性？</div>
                </div>
            </div>
        </div>

        <!-- 底部导航按钮 -->
        <div class="nav-buttons">
            <div class="nav-btn">
                <i class="icon-left"></i>
                <span>上一题</span>
            </div>
            <div class="nav-btn primary">
                <i class="icon-next"></i>
                <span>下一题</span>
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 显示答案解析
        document.getElementById('show-answer').addEventListener('click', function() {
            document.getElementById('answer-container').classList.add('active');
            this.style.display = 'none';
        });
        
        // 选项点击
        document.querySelectorAll('.option-item').forEach(option => {
            option.addEventListener('click', function() {
                // 如果答案已经显示，则不允许再选择
                if (document.getElementById('answer-container').classList.contains('active')) {
                    return;
                }
                
                // 清除其他选项的选中状态
                document.querySelectorAll('.option-item').forEach(item => {
                    item.classList.remove('selected');
                });
                
                // 设置当前选项为选中状态
                this.classList.add('selected');
            });
        });
        
        // 收藏按钮点击
        const favoriteBtn = document.querySelector('.action-btn.favorite');
        favoriteBtn.addEventListener('click', function() {
            // 切换收藏状态
            if (this.querySelector('.icon-favorite-o')) {
                this.innerHTML = '<i class="icon-favorite"></i><span>已收藏</span>';
                this.classList.add('favorite');
            } else {
                this.innerHTML = '<i class="icon-favorite-o"></i><span>收藏</span>';
                this.classList.remove('favorite');
            }
        });
        
        // 相关题目点击
        document.querySelectorAll('.related-item').forEach(item => {
            item.addEventListener('click', function() {
                // 跳转到对应题目
                window.location.reload(); // 模拟加载新题目
            });
        });
        
        // 上一题/下一题按钮点击
        document.querySelector('.nav-btn:first-child').addEventListener('click', function() {
            // 加载上一题
            window.location.reload(); // 模拟加载上一题
        });
        
        document.querySelector('.nav-btn.primary').addEventListener('click', function() {
            // 加载下一题
            window.location.reload(); // 模拟加载下一题
        });
    </script>
</body>
</html> 